<template>
    <div>
        <el-table :data="list" style="width: 100%">
            <el-table-column prop="id" label="ID" width="180" />
            <el-table-column prop="shopName" label="名称" width="180" />
            <el-table-column prop="shopAddress" label="地址" />
            <el-table-column prop="shopImage" label="图片">
                <template #default="{ row }">
                    <!-- <img :src="row.shopImage" alt="" style="width: 80px;"> -->
                    <el-image style="width: 100px; height: 100px" :src="row.shopImage" :zoom-rate="1.2" :max-scale="7"
                        :min-scale="0.2" :preview-src-list="srcList" :initial-index="4" fit="cover" />
                </template>
            </el-table-column>
        </el-table>

        <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="pageCode" />
    </div>
</template>

<script setup>
import axios from 'axios';
import { ref, watch } from 'vue';

const list = ref([])
const srcList = ref([])
// 页码
const pageCode = ref(1)
const total = ref(0)

const _getData = () => {
    axios.get('/api/list', { params: { pageCode: pageCode.value } }).then(res => {
        console.log(res);
        list.value = res.data.data.data
        // 数据总量，一共有多少条数据
        total.value = res.data.data.totalCount
    })
}

_getData()

watch(pageCode, () => {
    _getData()
})
</script>